<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="../public/cdn/axios/1.0.0/axios.min.js"></script>
        <button onclick="testAsync()">测试async</button>
        <button onclick="testAll()">测试并发请求</button>
    </head>

    <script>
        // new Promise出来的实例，成功或者失败，取决于executor函数执行的时候，执行的是resolve还是reject决定的，或executor函数执行发生异常错误，这两种情况都会把实例状态改为失败的。
        let p1 = new Promise((resolve, reject) => {
            // 调用resolve函数来将状态改为fulfilled（完成），决定了下个then中成功方法会被执行
            // 调用reject函数来将状态改为rejected（失败），决定了下个then中失败方法会被执行
            console.log("我是p1的executor函数")
            let rand = Math.random()
            console.log("随机数为：", rand)
            if (rand > 0.5) {
                resolve("success")
                // 调用resolve或reject以后，Promise 的使命就完成了，后面不应该有其他逻辑
            } else {
                reject("fail")
            }
        });
        let p2 = p1.then(rel => {
            console.log("成功", rel)
        }, err => {
            console.log("失败", err)
        });
        // 由于上面的then的成功方法和失败方法都没有返回失败的Promise实例，所以下个then执行的是成功方法；
        // 并且由于没有用return返回任何信息，所以rel是undefined
        p2.then(rel => {
            console.log("成功", rel)
        }, err => {
            console.log("失败", err)
        });
        // 此时p1已经执行完毕，所以下个then方法会立即执行，并且此时p1的状态已经确定
        p1.then(rel => {
            console.log("成功", rel)
        }, err => {
            console.log("失败", err)
        });
        function promise1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('promise1')
                }, 1000);
            });
        }
        function promise2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('promise2')
                }, 2000);
            });
        }
        function promise3() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject('promise3出错了')
                }, 1000);
            });
        }
        async function testAsync() {
            let rel = await promise1();
            console.log('promise1', rel);
            rel = await promise2();
            console.log('promise2', rel);
            try {
                // 如果reject 这里会抛出异常
                rel = await promise3();
                console.log('promise3', rel);
            } catch (e) {
                console.log('promise3', e)
            }

        }
        function testAll() {
            let time = new Date().getTime();
            console.log('发送请求：', time);
            // 两个请求并发执行，最终耗时为最长的那个请求的耗时
            Promise.all([promise1(), promise2()]).then(res => {
                console.log('all', res);
                [rel1, rel2] = res;
                console.log('rel1', rel1);
                console.log('rel2', rel2);
                console.log('all执行完毕：', new Date().getTime() - time);
            });
        }
    </script>
    <body>
    </body>
</html>
